<template>
    <div class="search-div">

      <el-dialog v-model="dialogVisible" title="添加或修改" width="30%">

        <!-- <el-form-item label="短信模板">
          <el-select v-model="sending.templateId" placeholder="请选择">
            <el-option v-for="item in Template" :key="item.id" :label="item.templateName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="短信模板名称">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入名称"
            v-model="sending.templateName">
          </el-input>
          </el-form-item>





          <el-form-item label="短信内容">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="sending.content">
          </el-input>
          </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submit()">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-dialog>
              <!-- 添加按钮 -->
              <div class="tools-div">
            <el-button type="success" size="small" @click="addShow">添加模板</el-button>
        </div>

         <!--- 角色表格数据 -->
         <el-table :data="list" style="width: 100%">
             <el-table-column prop="id" label="序号" width="100" />
             <el-table-column prop="templateName" label="短信模板" width="710" />
             <!-- <el-table-column prop="content" label="内容" width="700" /> -->

             <el-table-column label="操作" align="center" width="180" #default="scope">
                <el-button type="danger" size="small" @click="deleteById(scope.row)">
                    删除
                </el-button>
                <el-button type="primary" size="small" @click="editShow(scope.row)">
            修改
          </el-button>
            </el-table-column>

         </el-table>
         <!--分页条-->
         <el-pagination
                v-model:current-page="pageParams.page"
                v-model:page-size="pageParams.limit"
                :page-sizes="[10, 20, 50, 100]"
                @size-change="fetchData"
                @current-change="fetchData"
                layout="total, sizes, prev, pager, next"
                :total="total"
 />   
   </div>
 </template>
 <script setup>
 import { ref , onMounted } from 'vue';
 import { sendingList ,SaveSending ,delSending ,UpdateSending } from '@/api/yingfei/Sending'
 import { ElMessage, ElMessageBox } from 'element-plus'

 // 分页条总记录数
 let total = ref(0)
 
 // 定义表格数据模型
 let list = ref([])
 
 //分页数据
 const pageParamsForm = {
   page: 1, // 页码
   limit: 3, // 每页记录数
 }
 const pageParams = ref(pageParamsForm)     // 将pageParamsForm包装成支持响应式的对象
 const Template = ref({})

 
 // 搜索表单数据
 const queryDto = ref({"sname": ""})
 
 // 页面加载完毕以后请求后端接口获取数据
 onMounted(() => {
     fetchData() ;

 })

 // 远程调用后端分页查询接口
 const fetchData = async () => {
     const {data , code , message } = await sendingList(pageParams.value.page , pageParams.value.limit ) ;
     list.value = data.list ;
     total.value = data.total
 }

 const defaultForm = {       //页面表单数据
  id: '',
  articleId : '',
  categoryId: ''
}
const sending = ref(defaultForm)    
const dialogVisible = ref(false)

//进入添加
const addShow = () => {
  sending.value = {}
    dialogVisible.value = true
}


// 进入修改
const editShow = row => {
  sending.value = row
  dialogVisible.value = true
}

//添加
const submit = async()=>{
    if(!sending.value.id) {
        const { code } = await SaveSending(sending.value) ;
        if(code === 200) {
            dialogVisible.value = false
            ElMessage.success('操作成功')
            fetchData()
        }
//修改
}else {
        const { code } = await UpdateSending(sending.value) ;
        if(code === 200) {
            dialogVisible.value = false
            ElMessage.success('操作成功')
            fetchData()
        }
    }
}


// 删除数据
const deleteById = (row) => {
    ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
       const {code } = await delSending(row.id)
       if(code === 200) {
            ElMessage.success('删除成功')
            pageParams.value.page = 1
            fetchData()
       }
    })
}




 
 </script>
 
 <style scoped>
 
 .search-div {
   margin-bottom: 10px;
   padding: 10px;
   border: 1px solid #ebeef5;
   border-radius: 3px;
   background-color: #fff;
 }
 
 .tools-div {
   margin: 10px 0;
   padding: 10px;
   border: 1px solid #ebeef5;
   border-radius: 3px;
   background-color: #fff;
 }
 
 </style>